<template>
    <div id="a-page" ref="appRef">
      <div class="black_ground"></div>
      <div class="black_ground"></div>
      <div class="square"><button class="btn goWhere" @click="goToBPage"></button></div>
      <div class="rose" id="rose"></div>
<!--      <div class="abs-position">-->
<!--      <h1>jnxyqnw！</h1>-->



<!--      </div>-->
    </div>
  </template>

  <script>
  import { useRouter } from 'vue-router';
  import { ref, onMounted, watchEffect } from 'vue';

  export default {
    name: 'APage',
    setup() {
      // 使用 ref 来存储窗口的宽度和高度
      const windowWidth = ref(window.innerWidth);
      const windowHeight = ref(window.innerHeight);

      // 使用 ref 来获取 #app 元素
      const appRef = ref(null);

      // 在 onMounted 中设置 #app 的宽度和高度
      onMounted(() => {
        // 更新 #app 的样式
        updateAppSize();

        // 监听窗口大小变化
        window.addEventListener('resize', handleResize);
      });

      // 定义更新 #app 样式的方法
      const updateAppSize = () => {
        if (appRef.value) {
          appRef.value.style.width = `${windowWidth.value}px`;
          appRef.value.style.height = `${windowHeight.value}px`;
        }
      };

      // 定义处理窗口大小变化的方法
      const handleResize = () => {
        windowWidth.value = window.innerWidth;
        windowHeight.value = window.innerHeight;
        updateAppSize(); // 动态更新 #app 的样式
      };

      // 在组件卸载时移除事件监听器
      watchEffect((onInvalidate) => {
        onInvalidate(() => {
          window.removeEventListener('resize', handleResize);
        });
      });
      const router = useRouter();

      const goToBPage = () => {
        router.push({ name: 'HomePage' });
      };
      return {
        appRef,
        windowWidth,
        windowHeight,
        goToBPage

      };
    }
  };
  </script>


  <style  lang="scss">
  #a-page{
    .black_ground{
      background-color: black;
    }
    .abs-position{
      position: absolute;
      height: 180px;
      left: calc(50% - 120px);
      width: 240px;
      top: calc(50% - 90px);
    }
  }
  .square {
    overflow: hidden;
    width: 100%;
    height: 100%;
    //background-color: #3498db;
    position: relative;
    transition: all 0.5s ease; /* 添加过渡效果 */
    background: url("../assets/bacimg1.jpg");
  }

  /* 伪元素的初始状态 */
  .square::before,
  .square::after {
    transition: all 0.5s ease; /* 添加过渡效果 */
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    transition: all 0.5s ease; /* 添加过渡效果 */
  }

  /* 左三角形 */
  .square::before {
    transition: all 0.5s ease; /* 添加过渡效果 */
    left: 0;
    background: linear-gradient(to bottom right, transparent 50%, #fff 50%)
  }

  /* 右三角形 */
  .square::after {
    transition: all 0.5s ease; /* 添加过渡效果 */
    right: 0;
    background: linear-gradient(to top left, transparent 50%, #111 50%);
  }

  /* Hover 状态下的效果 */
  .square:hover {
    transition: all 0.5s ease; /* 添加过渡效果 */
    background-color: transparent; /* 隐藏正方形背景 */
  }

  .square:hover::before {
    transition: all 0.5s ease; /* 添加过渡效果 */
    left: 30%; /* 左三角形向左移动 */

    background: url("../assets/fff2.jpg");
    background-size: cover;
    background-position: center;
    //mask: linear-gradient(to bottom right, transparent 50%, black 50%);
    mask: linear-gradient(to bottom right, transparent 50%, black 50%);
    mask-size: 77% 96%;
    background-position: bottom;
    background-size: 915px 793px;
    background-repeat: no-repeat;
  }

  .square:hover::after {
    transition: all 0.5s ease; /* 添加过渡效果 */
    right: 30%; /* 右三角形向右移动 */
    background: url("../assets/fff3.jpg");
    background-size: cover;
    background-position: center;
    mask: linear-gradient(to top left, transparent 50%, black 50%);
    mask: linear-gradient(to top left, transparent 50%, black 50%);
    mask-size: 100% 100%;
    background-repeat: repeat;
    background-size: 100px;
    //background: linear-gradient(to top left, transparent 50%, url("../assets/logo.png") 50%);
  }
  .goWhere{
    position: absolute;
    left: calc(50% - 120px);
    top: calc(50% - 20px);
    z-index:99
  }
//.goWhere:hover{
//  content: '去爬山！';
//}
  .goWhere::after {
    content: '我们去哪玩 ！';
    transition: content 0.3s;
  }

  .goWhere:hover::after {
    content: '当然是爬山！';
  }

  /* 你的样式 */
  </style>